<template>
<el-dialog title=" " :visible.sync="dialogVisible" width="800px" append-to-body>
  <div class="person-data flex">
    <!-- 左边 -->
    <div class="person-left">
      <!-- 头像 -->
      <div class="avatar margin-xauto">
        <img :src="model.avatar" alt="">
      </div>
      <p class="tac mgt2 fc-b1 strong">{{model.nickname}}</p>
      <div class="intro-num tac mgt2 omit">
        <span class="fs-n">作品数：{{model.panonum}}</span>
        <i class="iconfont icon-liulanliang fs-n"></i>
        <span class="fs-n">{{model.seecount}}</span>
        <i class="iconfont icon-qinziAPPtubiao- fs-n"></i>
        <span class="fs-n">{{model.praisecount}}</span>
      </div>
      <div class="tac mgt3">
        <p class="fc-b1">个人主页二维码</p>
        <img style="width: 130px;height: 130px;" :src="`${urlApi}common/qrcode?data=${encodeURIComponent($WD.$globalconfig.URLS.HOME + 'm/authorDetail.html?id=' + model.user_id)}&logo=${encodeURIComponent(model.avatar)}`" alt="">
      </div>
    </div>
    <!-- 右边 -->
    <div class="person-right">
      <p class="fs-b">基本资料</p>
      <p>昵称：{{model.nickname}}</p>
      <p>身份：{{model.isrz==2?'摄影师':model.isrz==1?'认证用户':'普通用户'}}</p>
      <p>现居：{{model.areatext}}</p>
      <p class="desc">简介：{{model.dec}}</p>
    </div>
  </div>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      urlApi: $globalconfig.URLS.API,
      dialogVisible: false,
      model: {},
    }
  },
  methods: {
    openDialog(obj) {
      console.log(obj)
      this.model = obj
      this.dialogVisible = true
    },
  }
}
</script>

<style lang="stylus" scoped>
.person-data
  height 400px
  padding-top 10px
  padding-bottom 35px
  .person-left
    width 30%
    height 100%
    border-right 1px solid #eeeeee
    .avatar
      width 100px
      height 100px
      border-radius 50%
      overflow hidden
      img
        width 100%
        height 100%
        border-radius 50%
  .person-right
    width 70%
    padding-left 40px
    padding-right 20px
    
    p
      border-bottom 1px solid #eeeeee
      padding 12px 0
    p.desc
      border-bottom none
      max-height 175px
      overflow-y auto
      line-height 2
      letter-spacing 2px
</style>